window.addEventListener('load',function(){
    var circle=document.querySelector('.circle');
    var point=circle.getElementsByTagName('li');
    var main=this.document.querySelector('.focus');
    var lt=this.document.querySelector('.lt');
    var gt=this.document.querySelector('.gt');
    var ul=this.document.querySelector('.focus').querySelector('ul');
    var img=ul.getElementsByTagName('li');

    main.addEventListener('mouseenter',function(){
        clearInterval(timer);
        lt.style.display='block';
        gt.style.display='block';
    })
    main.addEventListener('mouseleave',function(){
        timer=setInterval(function(){
            arrow_gt();
        },3000)
        lt.style.display='none';
        gt.style.display='none';
    })
    //全局变量
    var bgw=img[0].offsetWidth;
    var num=0;
    var count=0;

    //圆圈调整背景图片位置
    function clear(){
        for(var j=0;j<point.length;j++){
            point[j].className='';
        }
    }
    for(var i=0;i<img.length;i++){
        var li=this.document.createElement('li');
        circle.appendChild(li);
        if(i==0){
            li.className='current';
        }
        li.setAttribute('data-index',i);
    }
    for(var i=0;i<point.length;i++){
        point[i].addEventListener('click',function(){
            var times=this.getAttribute('data-index');
            // console.log(times);
            // console.log(img[0].offsetWidth*times);
            num=times;
            count=times;
            move(ul,-bgw*times);
            clear();
            this.className='current';
        })
    }
    //

    //图片尾部添加备用图
    var li=img[0].cloneNode(true);
    ul.appendChild(li);
    //

    //右箭头调整背景图片位置
    function arrow_gt(){
        if(num==point.length){
            ul.style.left=0+'px';
            num=0;
        }
        num++;
        count++;
        count%=point.length;
        clear();
        point[count].className='current';
        
        move(ul,-bgw*num);
    }
    gt.addEventListener('click',arrow_gt);
    //

    //左箭头调整背景图片位置
    function arrow_lt(){
        if(num==0){
            num=point.length;
            ul.style.left=-bgw*num+'px';
        }
        num--;
        count--;
        count=count<0?point.length-1:count;
        // console.log(count);
        clear();
        point[count].className='current';
        move(ul,-bgw*num);
    }
    lt.addEventListener('click',arrow_lt);
    //
    //定时更换
    var timer=setInterval(function(){
        arrow_gt();
    },3000)
    // 页面卸载时清除定时器，避免内存泄漏
    window.addEventListener('beforeunload', function() {
        clearInterval(timer);
    });
    //
})
